<template>
  <div class="career-info"
       v-loading="loading" element-loading-text="加载职位信息中~"
       element-loading-spinner="el-icon-loading"
       element-loading-background="rgba(0, 0, 0, 0.8)">
    <el-backtop :visibility-height="100"></el-backtop>
    <el-row class="career-title">
      <el-row class="career-title-content" type="flex">
        <el-col style="display: flex;flex-flow: column;justify-content: space-evenly">
          <el-row style="color: white;font-size: 14px" v-text="career_info.job_status"></el-row>
          <el-row style="color: white;font-size: 28px;font-weight: bold" type="flex">
            <el-col>{{ career_info.job_name }}</el-col>
            <el-col style="color: #f26d49">{{ career_info.job_price / 1000 }}k</el-col>
          </el-row>
          <el-row type="flex" style="color: white;font-size: 14px">
            <div><i class="el-icon-location" /> {{ career_info.job_address }}</div>
            <div style="margin-left: 20px"><i class="el-icon-s-cooperation" /> {{ career_info.job_experience }}</div>
            <div style="margin-left: 20px"><i class="el-icon-share" /> {{ career_info.job_education }}</div>
            <div style="margin-left: 20px"><i class="el-icon-s-management" /> {{ career_info.job_type }}</div>
          </el-row>
          <el-row>
            <el-button v-if="submitBtnEnabled" class="submit-button" type="primary" plain @click="submitResume">投递简历</el-button>
            <el-button v-else class="submit-button" :loading="btnLoading" type="primary" plain >{{ submitBtnText }}</el-button>
            <el-dialog
                title="投递简历"
                :visible.sync="submitResumeDialog"
                width="500px"
                append-to-body
                :before-close="handleSubmitResumeDialogClose"
                v-loading="dialogLoading"
                >
              <span>请选择您的简历，若无请前去<el-button type="text" @click="insert">添加</el-button>简历</span>
              <el-divider></el-divider>
              <el-form :model="condition" :rules="rules" ref="conditionForm">
                <el-form-item prop="resumeChooseItem" >
                  <el-select v-model="condition.resumeChooseItem" style="width: 270px" clearable placeholder="请选择简历">
                    <el-option-group
                        v-for="group in resumeOptions"
                        :key="group.label"
                        :label="group.label">
                      <el-option
                          v-for="item in group.options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                      </el-option>
                    </el-option-group>
                  </el-select>
                </el-form-item>
              </el-form>

              <div slot="footer" class="dialog-footer">
                <el-button @click="handleSubmitResumeDialogClose">取 消</el-button>
                <el-button type="primary" @click="submitResumeToBackend">投 递</el-button>
              </div>
            </el-dialog>
          </el-row>
        </el-col>
        <el-col>
          <el-row style="display: flex;flex-flow: column;align-items: flex-end">
            <div><el-image style="width: 150px;height: 150px;margin-right: 67px" :src="require('@/assets/images/career_title.png')"></el-image></div>
            <div>
              <el-button style="color: #2ad2d2;font-size: 16px;margin-right: 36px" type="text" icon="el-icon-s-order" @click="jump_resume">完善在线简历</el-button>
              <el-button style="color: #2ad2d2;font-size: 16px" type="text" icon="el-icon-upload" @click="jump_resume">新增附件简历</el-button>
            </div>
          </el-row>
        </el-col>
      </el-row>
    </el-row>
    <el-row class="career-main" type="flex">
      <el-col class="career-main-content">
        <el-card class="card" shadow="never">
          <el-page-header @back="$router.go(-1)" content="职位详情"></el-page-header>
          <el-row class="card-title">职位描述</el-row>
          <el-row class="card-content" style="letter-spacing: 2px;">
            {{ career_info.job_description }}
          </el-row>
          <el-row class="card-title">职位责任</el-row>
          <el-row class="card-content" style="letter-spacing: 2px;">
            {{ career_info.job_responsibility }}
          </el-row>
          <el-row class="card-title">职位福利</el-row>
          <el-row class="card-content" style="letter-spacing: 2px;">
            {{ career_info.job_welfare }}
          </el-row>
          <el-divider></el-divider>
          <el-row type="flex" :gutter="50">
            <el-col :span="2">
              <el-avatar :size="56" :src="require('@/assets/images/career_female.png')"></el-avatar>
            </el-col>
            <el-col>
              <el-row style="font-size: 22px">
                {{ career_info.company.principal }}
                <el-image style="width: 17px;height: 17px" :src="require('@/assets/images/auth.png')"></el-image>
              </el-row>
              <el-row style="margin-top: 3px;color: #6b6b6b">
                <router-link class="link" :to="{name: 'Details', query: {name: career_info.company.company}}" >
                  {{ career_info.company.company}}
                </router-link>
                · 招聘人</el-row>
            </el-col>
          </el-row>
        </el-card>
        <el-card class="warn-card" shadow="never">
          <el-row type="flex" :gutter="30">
            <el-col>
              <el-row style="font-weight: bold;font-size: 20px">安全小卫士</el-row>
              <el-row style="margin-top: 20px;letter-spacing: 2px;" type="flex">
                  严禁用人单位和招聘者用户做出任何损害求职者合法权益的违法违规行为，
                  包括但不限于扣押求职者证件、收取求职者财物、向求职者集资、让求职者入股、诱导求职者异地入职、异地参加培训、违法违规使用求职者简历等
              </el-row>
            </el-col>
            <el-col :span="6">
              <el-image style="width: 130px;height: 130px" :src="require('@/assets/images/safe_tip.png')" />
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col class="career-main-aside">
        <el-card class="company-card" shadow="never">
          <div slot="header">公司基本信息</div>
          <el-row type="flex" style="margin-bottom: 15px">
            <el-col :span="8">
              <el-avatar shape="square" :size="47" :src="career_info.company.logo"></el-avatar>
            </el-col>
            <el-col style="margin-top: 12.5px">
              <router-link style="font-size: 17px" class="link" :to="{name: 'Details', query: {name: career_info.company.company}}" >
                {{ career_info.company.company}}
              </router-link>
            </el-col>
          </el-row>
          <el-row class="company-info" type="flex">
            <el-col :span="4"><i class="el-icon-location"></i></el-col>
            <el-col>{{ career_info.company.address }}</el-col>
          </el-row>
          <el-row class="company-info" type="flex">
            <el-col :span="4"><i class="el-icon-s-custom"></i> </el-col>
            <el-col>{{ career_info.company.scale}}</el-col>
          </el-row>
          <el-row class="company-info" type="flex">
            <el-col :span="4"><i class="el-icon-date"></i></el-col>
            <el-col>{{ msToDate(career_info.company.start_time).withoutTime }}</el-col>
          </el-row>
          <el-row type="flex" justify="center">
            <el-button class="company-button" size="medium" plain @click="jumpCompanyInfo">查看全部职位</el-button>
          </el-row>
        </el-card>
        <el-image class="photo" :src="require('@/assets/images/zhaop.png')"></el-image>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {msToDate} from "@/utils/format";
import {mapGetters} from "vuex";

export default {
  name: "CareerInfo",
  data() {
    return {
      loading: false,
      server: window.application.minio_host,
      career_id: 0,
      career_info: {
        id:"",
        job_name:"",
        job_price:"",
        job_address:"",
        job_experience:"",
        job_education:"",
        job_welfare:"",
        job_type:"",
        job_description:"",
        job_responsibility:"",
        job_image:"",
        job_status:"",
        company:{
          id:"",
          principal:"",
          phone:"",
          email:"",
          company:"",
          logo:"",
          start_time:"",
          address:"",
          state:"",
          scale: "",
          uuid:""}
      },
      btnLoading: false,
      submitBtnEnabled: true,
      submitBtnText: "",
      submitResumeDialog: false,
      dialogLoading: false,
      condition: {
        resumeChooseItem: undefined,
      },
      resumeOptions: [],
      rules: {
        resumeChooseItem: [
          { required: true, message: '简历文件必须选择', trigger: ['blur', 'change'] },
        ],
      }
    }
  },
  created() {
    this.career_id = this.$route.query.id
  },
  mounted() {
    this.getById()
  },
  computed: {
    ...mapGetters(['user','token','resumes']),
    logoUrl() {
      return this.server + this.career_info.company.logo
    }
  },
  methods: {
    msToDate,
    getById() {
      this.loading = true
      this.$store.dispatch("career/getFrontendCareerInfoById", this.career_id)
          .then((resp) => {
            resp.company.logo = this.server + resp.company.logo
            this.career_info = resp
            if (!(this.token === undefined && JSON.stringify(this.user) === "{}")) {
              this.$store.dispatch("resume/checkUserDeliveredResumeForCareer", {
                career_id: this.career_id,
                user_id: this.user.id
              }).then((resp) => {
                if (resp.data == null) {
                  this.submitBtnEnabled = true
                  this.submitBtnText = ""
                } else {
                  this.submitBtnEnabled = false
                  this.btnLoading = true
                  this.submitBtnText = resp.data.audit_status + "..."
                }
              }).catch((error) => {
                this.$message.error(error)
              })
            }
          })
          .catch((error) => {
            this.$message.error(error)
          }).finally(() => {
            setTimeout(() => {
              this.loading = false
            },1500)
      })
    },
    jump_resume() {
      if (this.token === undefined && JSON.stringify(this.user) === "{}") {
        this.$confirm('系统检测到处于为未登录状态是否前去登录?', '提示', {
          confirmButtonText: '前去登录',
          cancelButtonText: '随便看看',
          closeOnClickModal: false,
          type: 'warning'
        }).then(() => {
          this.$router.push("/login")
        }).catch(() => {})
      } else {
        this.$router.push("/resumes")
      }
    },
    submitResume() {
      if (this.token === undefined && JSON.stringify(this.user) === "{}") {
        this.$confirm('系统检测到处于为未登录状态是否前去登录?', '提示', {
          confirmButtonText: '前去登录',
          cancelButtonText: '随便看看',
          closeOnClickModal: false,
          type: 'warning'
        }).then(() => {
          this.$router.push("/login")
        }).catch(() => {})
      } else {
        this.openSubmitResumeDialog()
      }
    },
    jumpCompanyInfo() {
      this.$router.push({name: 'Details', query: {name: this.career_info.company.company}})
    },
    handleSubmitResumeDialogClose() {
      this.submitResumeDialog = false
      this.resumeOptions = []
      this.resumeChooseItem = ""
      this.$refs.conditionForm.resetFields()
    },
    insert() {
      this.jump_resume()
      this.handleSubmitResumeDialogClose()
    },
    openSubmitResumeDialog() {
      this.submitResumeDialog = true
      let loading = this.$loading({
        target: ".el-dialog"
      })
      this.$store.dispatch("resume/getUserResumesInfoById", this.user.id)
          .then((resp) => {
            if (resp) {
              let onlineResumes = this.resumes.resumesInfo

              let platformOptions = {
                label: "平台简历",
                options: []
              }
              onlineResumes.forEach(item => {
                platformOptions.options.push({ label: item.resume_title, value: item.id + ".online" })
              })
              this.resumeOptions.push(platformOptions)

              let resumeFiles = this.resumes.onlineResumeFiles
              let resumesOptions = {
                label: "简历文件",
                options: []
              }
              resumeFiles.forEach(item => {
                resumesOptions.options.push({ label: item.file_name, value: item.id + ".file" })
              })
              this.resumeOptions.push(resumesOptions)

              setTimeout(()=> {
                loading.close()
              },1500)
            }
          })
          .catch((resp) => {
            this.$message.error("用户简历数据获取失败, 请重试!")
          })
    },
    submitResumeToBackend() {
      this.$refs['conditionForm'].validate(valid => {
        if (valid) {
          this.condition.career_id = this.career_id
          this.condition.user_id = this.user.id
          this.$store.dispatch("resume/userDeliverResume", this.condition)
              .then((resp) => {
                if (resp) {
                  this.handleSubmitResumeDialogClose()
                  this.getById()
                  this.$message.success("简历投递成功")
                }
              }).catch((error) => {
                this.$message.error(error)
          })
        }
      })
    },
  }
}
</script>

<style scoped lang="css">

.career-info {
  background: linear-gradient(to bottom, #dfeef1, 1%, white);
  min-height: 900px;
}

.career-title {
  width: 100%;
  height: 205px;
  min-width: 1200px;
  min-height: 205px;
  background: linear-gradient(to right, #3d5169, #38596c);
}

.career-title-content {
  width: 1180px;
  min-width: 1180px;
  height: 100%;
  margin: auto;
}

.career-main {
  width: 1184px;
  min-width: 1184px;
  margin: 15px auto;
}

.career-main-content {
  width: 884px;
  min-width: 884px;
}

.career-main-aside {
  width: 284px;
  min-width: 284px;
  margin-left: 16px;
}

.card {
  border-radius: 15px;
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  margin-top: 20px;
}

.card-content {
  margin: 10px;
}

.submit-button {
  width: 200px;
  height: 45px;
  background-color: #28b8b8;
  color: #dbecef;
  border: none;
  border-radius: 12px;
  font-size: 16px;
}

.submit-button:hover {
  color: white;
  background-color: #28b8b8;
}

.submit-button:focus {
  color: white;
  background-color: #28b8b8;
}

.link {
  color: #3a3a3a;
  text-decoration: none;
}

.link:hover {
  color: #28b8b8;
}

.company-card {
  border-radius: 15px;
}

.company-card ::v-deep .el-card__header {
  background: linear-gradient(90deg, #f5fcfc 0, #fcfbfa 100%);
}

.company-info {
  margin-top: 10px;
  color: #565656;
}

.company-button {
  margin-top: 20px;
  width: 160px;
  height: 35px;
  position: relative;
  border-radius: 8px;
  border: 1px solid #00bebd;
  font-weight: 500;
  color: #00a6a7;
}

.company-button:hover {
  background-color: #00bebd;
  color: white;
  border: 1px solid #00bebd;
}

.warn-card {
  border-radius: 15px;
  margin-top: 15px;
}

.photo {
  border-radius: 15px;
  margin-top: 20px;
}
</style>
